<script setup lang="ts">
import { Video } from "../../index";
import { API_NAME } from "../../api/contants.ts";
import { ref, watch } from "vue";
import { reactive } from "vue";

// @ts-ignore
import { videoPlay } from "vue-video-play";

const props = defineProps<{ video: Video }>();
const url = ref(`${API_NAME}/video/download/${props.video.id}`);

watch(
  () => props.video.id,
  (newValue) => {
    url.value = `${API_NAME}/video/download/` + newValue;
  },
);

const options = reactive({
  width: "800px", //播放器高度
  height: "450px", //播放器高度
  color: "#409eff", //主题色
  title: "", //视频名称
  src: url, //视频源
  muted: false, //静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制器
  speed: true,
});
</script>

<template>
  <!--  <div class="text-center">{{ video.title }}</div>-->
  <vue3VideoPlay class="text-center mx-auto" v-bind="options" />
</template>

<style scoped></style>
